<%@ page language="java" contentType="text/html;charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<script src="<c:url value='/js/jquery.form.js'/>"></script>

<script type="text/javascript">
$(document).ready(function() {
      var options = {
         success : function(data) {
             $("#working-area").html(data);
         }
     };
     $("#add-proxy-form").ajaxForm(options);
     $("#add-busZone-form").ajaxForm(options);
});
</script>

<div>
    <div class="">
            <ul class="breadcrumb">
                <li>
                    <h3 style="margin-top: auto">
                        <c:out value="${project.name}"></c:out>
                        <span class="divider">/</span>
                    </h3>
                </li>
                <li><h3>显控设计模式 <span class="divider">/</span></h3></li>
                <li class="active"><h3><a href="#">总线通信</a> <span class="divider">/</span></h3></li>
            </ul>
    </div>
    <hr  />
    <!-- div class="tabbable">
		<div class="tabbable" style="margin-bottom: 18px;">
			<ul class="nav nav-tabs">
			    <li class=""><a href="" data-toggle="pill"><h3>实体数据区</h3></a></li>
				<li class="active"><a href="" data-toggle="pill"><h3>总线通信</h3></a></li>
				<li class=""><a href="" data-toggle="pill"><h3>IO通信</h3></a></li>
				<li class=""><a href="" data-toggle="pill"><h3>信息显示</h3></a></li>
				<li class=""><a href="" data-toggle="pill"><h3>控制响应</h3></a></li>

			</ul 
			<div class="tab-content"
				style="padding-bottom: 9px; border-bottom: 1px solid #ddd;" -->
			<div >
				<!-- div class="tab-pane" id="tab5"></div -->
				<div class="tab-pane active form-horizontal" id="tab1">
					<!-- div class="span9" align="right">
					   <a class="btn"
                            href="<%=request.getContextPath()%>/entityZone/${project.id}/list/"><i class="icon-arrow-left"></i> 上一步</a>
						<a class="btn"
							href="<%=request.getContextPath()%>/project/${project.id}/design_pattern_component/IO"><i class="icon-arrow-right"></i> 下一步</a>
						<a class="btn"
                            href="<%=request.getContextPath()%>/project/list?projectId=${project.id}"><i class="icon-circle-arrow-left"></i> 返回</a>
					</div -->
					<div class="control-group span7">
						<label class="control-label" for="">设计模式实例名称</label>
						<div class="controls">
							<span class="uneditable-input input-large"><c:out
									value="${dpiName}"></c:out></span>
						</div>
					</div>
					
					<div class="control-group span7">
                        <label class="control-label" for="">总线数据区</label>
                        <div class="controls">
                            <div>
                                <button class="btn" data-target="#bus_zone_panel"
                                            data-toggle="modal" data-backdrop="false"><i class="icon-plus" ></i> 增加</button>
                                <p />
                                <table class="table table-hover table-striped table-bordered">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>总线数据区</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <c:forEach items="${busZones}" var="busZone"
                                            varStatus="status">
                                            <tr>
                                                <td>${status.count}</td>
                                                 <td>${busZone.name}</td>
                                                <td>
                                                    <div class="btn-group">
                                                        <button class="btn" name="viewBusZone"
                                                            data-target="#bus_zone_info_panel"
                                                            data-toggle="modal" data-backdrop="false"><i class="icon-search"></i> <strong>详细</strong></button>
                                                        <c:choose>
                                                        <c:when test="${isEdit}">
                                                            <button class="btn" name="deleteBusZone" onClick="showBusZoneDeletePanel('${busZone.id}', this)"><i class="icon-trash"></i> 删除</button>
                                                            <input type="hidden" value="${busZone.id }" />
                                                        </c:when>
                                                        </c:choose>
                                                    </div>
                                                </td>
                                            </tr>
                                        </c:forEach>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
					
					<div class="control-group span7">
						<label class="control-label" for="">已有代理</label>
						<div class="controls">
							<div>
								<p />
								<table class="table table-hover table-striped table-bordered">
									<thead>
										<tr>
											<th>#</th>
											<th>外部设备名称</th>
											<th>操作</th>
										</tr>
									</thead>
									<tbody>
										<c:forEach items="${exist_equipments}" var="equipment"
											varStatus="status">
											<tr>
												<td>${status.count}</td>
												 <td>${equipment.name}</td>
												<td>
													<div class="btn-group">
														<button class="btn " name="view_equipment"
															data-target="#dp_component_info_panel"
															data-toggle="modal" data-backdrop="false">
															<i class="icon-search" ></i> 详细</button>
													    <c:choose>
                                                        <c:when test="${isEdit}">
														      <button class="btn " name="delete_equipment" onClick="showBusAgentDeletePanel('${equipment.uri}', this)">
														      <i class="icon-trash"></i> 删除</button>
														 </c:when>
														 </c:choose>
														<input type="hidden" value="${equipment.uri }" />
													</div>
												</td>
											</tr>
										</c:forEach>
									</tbody>
								</table>
							</div>
						</div>
					</div>

               <c:choose>
                    <c:when test="${isEdit}">
					<div class="control-group span9" id="add_equipment">
						<form class="form-horizontal" id="add-proxy-form"
							action="<%=request.getContextPath()%>/busDesignPattern/project/add"
							method="post">
							<input type="hidden" name="dpiName" value="${dpiName}"></input>
							<input type="hidden" name="dpcUri" value="${dpcUri}"></input>
							<input type="hidden" name="projectId" value="${project.id }"></input> 
							<label
								class="control-label" for="dataZone">添加代理</label>
							<div class="controls">
								<br></br>
								<legend>外部设备</legend>
								<div class="control-group">
									<label class="control-label" for="equipment">设备</label>
									<div class="controls">
										<select name="equipment">
											<c:forEach items="${outterEquipments}" var="equipment">
												<option value="${equipment.uri}">
													<c:out value="${equipment.name}"></c:out>
												</option>
											</c:forEach>
										</select>
									</div>
								</div>

								<div class="control-group">
									<label class="control-label" for="busType">总线类型</label>
									<div id="busType" class="controls">
										<select name="bus_type">
											<c:forEach items="${buses}" var="bus">
												<option value="${bus.uri}">
													<c:out value="${bus.name}"></c:out>
												</option>
											</c:forEach>
										</select>
									</div>
								</div>

								<legend>总线数据区</legend>
								<!-- div class="control-group">
									<label class="control-label" name="bus_data_area_label"
										for="bus_data_area">总线数据区</label>
									<div id="type" class="controls">
										<input type="text" name="bus_data_area"
											placeholder="请输入总线数据区名称"></input> <span class="help-block">请输入英文名称，例如
											ins_data_area</span>
									</div>
								</div -->

								<div class="control-group">
									<label class="control-label" for="busType">总线数据区</label>
									<div class="controls">
									   <select name="bus_zone">
                                            <c:forEach items="${busZones }" var="busZone">
                                                <option value="${busZone.id}">
                                                    <c:out value="${busZone.name}"></c:out>
                                                </option>
                                            </c:forEach>
                                        </select>
									</div>
									<!-- div id="type" class="controls">
										<button class="btn" data-target="#data_component_panel"
											data-toggle="modal">增加</button>
										<p />
										<input type="hidden" name="entity_data_area" value="" />
										<table class="table table-bordered" id="data_component_table">
											<thead>
												<tr>
													<th>#</th>
													<th>数据实体</th>
												</tr>
											</thead>
											<tbody></tbody>
										</table>
									</div -->
								</div>

								<legend>共享内存区</legend>
								<div class="control-group">
									<label class="control-label" name="" for="busType">外部设备号</label>
									<div id="type" class="controls">
										<input type="text" name="equipment_number" placeholder="请输入数字"></input>
									</div>
								</div>

								<legend>读写代理</legend>
								<div class="control-group">
									<label class="control-label" for="read_bus_processing_method">总线读初始化函数</label>
									<div class="controls">
										<!-- select name="read_bus_processing_method">
											<c:forEach items="${interfaceMethods }" var="read_method">
												<option value="${read_method.id}">
													<c:out value="${read_method.methodSigniture}"></c:out>
												</option>
											</c:forEach>
										</select  -->
										<select name="read_bus_init_method">
										     <option value="0">null</option> 
                                             <c:forEach items="${methodComponentLinks}" var="link">
                                                 <option value="${link.method.id}=${link.component.uri}">
                                                     <c:out value="${link.method.methodSigniture} -- ${link.component.name}"></c:out>
                                                </option>
                                            </c:forEach>
                                        </select>
									</div>
								</div>
								
								<div class="control-group">
                                    <label class="control-label" for="read_bus_processing_method">总线读处理函数</label>
                                    <div class="controls">
                                        <!-- select name="read_bus_processing_method">
                                            <c:forEach items="${interfaceMethods }" var="read_method">
                                                <option value="${read_method.id}">
                                                    <c:out value="${read_method.methodSigniture}"></c:out>
                                                </option>
                                            </c:forEach>
                                        </select  -->
                                        <select name="read_bus_processing_method">
                                             <option value="0">null</option> 
                                             <c:forEach items="${methodComponentLinks}" var="link">
                                                 <option value="${link.method.id}=${link.component.uri}">
                                                     <c:out value="${link.method.methodSigniture} -- ${link.component.name}"></c:out>
                                                </option>
                                            </c:forEach>
                                        </select>
                                    </div>
                                </div>

								<!-- div class="control-group">
									<label class="control-label" for="read_frequency">执行频率</label>
									<div class="controls">
										<input type="text" name="read_frequency" /> Hz
									</div>
								</div -->

								<div class="control-group">
									<label class="control-label" for="write_bus_processing_method">总线写初始化函数</label>
									<div class="controls">
										<select name="write_bus_init_method">
										    <option value="0">null</option> 
											 <c:forEach items="${methodComponentLinks}" var="link">
                                                 <option value="${link.method.id}=${link.component.uri}">
                                                     <c:out value="${link.method.methodSigniture} -- ${link.component.name}"></c:out>
                                                </option>
                                            </c:forEach>
										</select>
									</div>
								</div>
								
								<div class="control-group">
                                    <label class="control-label" for="write_bus_processing_method">总线写处理函数</label>
                                    <div class="controls">
                                        <select name="write_bus_processing_method">
                                            <option value="0">null</option> 
                                            <c:forEach items="${methodComponentLinks}" var="link">
                                                 <option value="${link.method.id}=${link.component.uri}">
                                                     <c:out value="${link.method.methodSigniture} -- ${link.component.name}"></c:out>
                                                </option>
                                            </c:forEach>
                                        </select>
                                    </div>
                                </div>

								<!-- div class="control-group">
									<label class="control-label" for="write_frequency">执行频率</label>
									<div class="controls">
										<input type="text" name="write_frequency" /> Hz
									</div>
								</div -->

								<div class="control-group">
									<div class="controls">
										<button type="submit" class="btn "><i class="icon-ok"></i> 确认</button>
										<button type="reset" class="btn"><i class="icon-remove"></i> 取消</button>
									</div>
								</div>
							</div>
						</form>
					</div>
				    </c:when>
				    </c:choose>
				</div>

				<!-- div class="tab-pane" id="tab2"></div>
				<div class="tab-pane" id="tab3"></div>
				<div class="tab-pane" id="tab4"></div>
			</div>
		</div -->
		<!-- /tabbable -->
	</div>
</div>


<div class="modal hide fade" id="data_component_panel">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal"
			aria-hidden="true">&times;</button>
		<h3>添加数据实体组件</h3>
	</div>
	<div class="modal-body">
		<c:forEach items="${data_components}" var="dcom">
			<div id="data_area_input" class="control-group">
				<label class="checkbox"> <input type="checkbox"
					value="${dcom.uri}" /> <c:out value="${dcom.name}"></c:out>
				</label>
			</div>
		</c:forEach>
	</div>
	<div class="modal-footer">
		<button class="btn " id="add_data_component"><i class="icon-ok"></i> 保存</button>
		<button class="btn" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i> 关闭</button>
	</div>
</div>

<div class="modal hide fade" id="bus_zone_panel">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"
            aria-hidden="true">&times;</button>
        <h3>添加总线数据区</h3>
    </div>
    <form class="form-horizontal" action="<%=request.getContextPath()%>/busZone/project/${project.id}/add" 
    id="add-busZone-form" method="post">
    <div class="modal-body">
        <div class="control-group">
            <label class="control-label" for="name">名称</label>
            <div class="controls">
                <input type="text" name="name" placeholder="">
            </div>
        </div>
        <div class="control-group " >
                <label class="control-label" for="display_data">绑定</label>
                <div class="controls">
                    <c:forEach items="${entityZones}" var="entityZone">
                    <label class="checkbox"> 
                        <input type="checkbox" value="${entityZone.id}" name="entityZoneId" /> 
                        <c:out value="${entityZone.name}"></c:out>
                    </label>
                    </c:forEach>
                </div>
        </div>
    </div>
    <div class="modal-footer">
        <button class="btn " id="add_data_component"><i class="icon-ok"></i> 保存</button>
        <button class="btn" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i> 关闭</button>
    </div>
    </form>
</div>

<div class="modal hide fade" id="dp_component_info_panel">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal"
			aria-hidden="true">&times;</button>
		<h3>外部设备详细信息</h3>
	</div>
	<div class="modal-body">
		<table class="table table-hover" style="width: 80%">
			<thead>
				<tr>
					<th style="width: 40%">属性</th>
					<th style="width: 60%">详细信息</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>设备名称</td>
					<td><span id="equipment_info"></span></td>
				</tr>

				<tr>
					<td>总线类型</td>
					<td><span id="bus_type_info"></span></td>
				</tr>
                <tr>
                    <td>总线数据区</td>
                    <td><span id="bus_zone_info"></span></td>
                </tr>
				<tr>
					<td>外部设备号</td>
					<td><span id="equipment_number_info"></span></td>
				</tr>
				<tr>
                    <td>总线读初始化函数</td>
                    <td><span id="read_bus_init_method_info"></span></td>
                </tr>
				<tr>
					<td>总线读处理函数</td>
					<td><span id="read_bus_processing_method_info"></span></td>
				</tr>
				<!-- tr>
					<td>执行频率</td>
					<td><span id="read_frequency_info"></span></td>
				</tr -->
				<tr>
                    <td>总线写初始化处理函数</td>
                    <td><span id="write_bus_init_method_info"></span></td>
                </tr>
				<tr>
					<td>总线写处理函数</td>
					<td><span id="write_bus_processing_method_info"></span></td>
				</tr>
				<!-- tr>
					<td>执行频率</td>
					<td><span id="write_frequency_info"></span></td>
				</tr -->
			</tbody>
		</table>
	</div>
	<div class="modal-footer">
		<!-- button class="btn" data-dismiss="modal" aria-hidden="true"><i class="icon-"></i> 关闭</button -->
		<button class="btn" data-dismiss="modal" 
		id="view_equipment_info_ok" onclick="closeDialog($('#dp_component_info_panel'))"><i class="icon-ok"></i> 确定</button>
	</div>
</div>

<div class="modal hide fade" id="bus_zone_info_panel">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"
            aria-hidden="true">&times;</button>
        <h3>总线数据区详细信息</h3>
    </div>
    <div class="modal-body">
        <table class="table table-hover" style="width: 80%">
            <thead>
                <tr>
                    <th style="width: 30%">名称</th>
                    <th style="width: 70%">大小</th>
                </tr>
            </thead>
            <tbody id="busZoneInfo">
            </tbody>
        </table>
    </div>
    <div class="modal-footer">
        <!-- button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button-->
        <button class="btn" data-dismiss="modal" 
        id="view_busZone_info_ok" >确定</button>
    </div>
</div>

<div class="modal hide fade" id="delete-bus-zone-panel">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>删除总线数据区</h3>
    </div>
    <div class="modal-body">
        <p>确定要删除总线数据区?</p>
    </div>
    <div class="modal-footer">
        <!-- button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button-->
        <button class="btn" data-dismiss="modal" id="delete-bus-zone-btn">
            <i class="icon-ok"></i>&nbsp;确定
        </button>
        <button class="btn" data-dismiss="modal">
            <i class="icon-remove"></i>&nbsp;取消
        </button>
    </div>
</div>

<div class="modal hide fade" id="delete-bus-agent-panel">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>删除总线代理</h3>
    </div>
    <div class="modal-body">
        <p>确定要删除总线代理?</p>
    </div>
    <div class="modal-footer">
        <!-- button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button-->
        <button class="btn" data-dismiss="modal" id="delete-bus-agent-btn">
            <i class="icon-ok"></i>&nbsp;确定
        </button>
        <button class="btn" data-dismiss="modal">
            <i class="icon-remove"></i>&nbsp;取消
        </button>
    </div>
</div>


<!-- Le javascript
    ================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="<c:url value='/js/design_pattern_component.js'/>"></script>
<script src="<c:url value='/js/editBusDesignPatternComponent.js'/>"></script>

